import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { NavBar, Icon } from "antd-mobile";
import { getOrder, cancelOrder } from "../../data/lhapi";
import styles from "./Order.module.scss";
class Order extends Component {
  state = {
    active: this.props.location.search.split("?")[1],
    orderList: [],
  };

  async componentDidMount() {
    let res = await getOrder();
    //console.log(res.data.records);
    //console.log(res.data.records[0].items[0]);
    this.setState({
      orderList: res.data.records,
    });
  }
  handleTabClick = (e) => {
    let active = e.target.dataset["tab"];
    this.setState({
      active: active,
    });
  };
  handleOderClick = (params) => {
    this.props.history.push("orderDetail?orderSn=" + params);
  };
  handleGoodsClick = (e, params) => {
    e.stopPropagation();
    this.props.history.push("goodsDetail?" + params);
  };
  handlePayClick = (e, params) => {
    e.stopPropagation();
    this.props.history.push(
      "payment?orderSn=" + params.orderSn + "&totalPrice=" + params.totalPrice
    );
  };
  handleCancelClick = async (e, params) => {
    //e.target.innerHTML = "已取消";
    //e.target.className = "isCancel";
    //console.log(e.target.parent);
    e.stopPropagation();
    let res = await cancelOrder(params);
    console.log(res);
    let update = await getOrder();
    //console.log(res.data.records);
    //console.log(res.data.records[0].items[0]);
    this.setState({
      orderList: update.data.records,
    });
  };
  render() {
    return (
      <div className={styles.xmOrder}>
        <NavBar
          className={styles.navBar}
          onLeftClick={() => this.props.history.go(-1)}
          icon={<Icon type="left" className={styles.icon} />}
        >
          <span>我的订单</span>
        </NavBar>
        {/* 订单状态导航栏开始 */}
        <div className={styles.orderStatusNav} onClick={this.handleTabClick}>
          <div
            data-tab="1"
            className={
              this.state.active == 1
                ? styles.active + " " + styles.statusNavItem
                : styles.statusNavItem
            }
          >
            全部
          </div>
          <div
            data-tab="2"
            className={
              this.state.active == 2
                ? styles.active + " " + styles.statusNavItem
                : styles.statusNavItem
            }
          >
            待付款
          </div>
          <div
            data-tab="3"
            className={
              this.state.active == 3
                ? styles.active + " " + styles.statusNavItem
                : styles.statusNavItem
            }
          >
            待发货
          </div>
          <div
            data-tab="4"
            className={
              this.state.active == 4
                ? styles.active + " " + styles.statusNavItem
                : styles.statusNavItem
            }
          >
            已发货
          </div>
          <div
            data-tab="5"
            className={
              this.state.active == 5
                ? styles.active + " " + styles.statusNavItem
                : styles.statusNavItem
            }
          >
            已完成
          </div>
        </div>
        {/* 订单状态导航栏结束 */}
        {/* 订单列表开始 */}
        <div className={styles.orderList}>
          <div className={this.state.active == 1 ? styles.orderListItem : styles.hidden}>
            {this.state.orderList.map((v, index) => {
              return (
                <div
                  className={styles.allOrderItems}
                  key={v.id}
                  onClick={this.handleOderClick.bind(this, v.orderSn)}
                >
                  <div className={styles.allOrderTop}>
                    <div className={styles.orderTopLeft}>
                      订单编号：
                      <p>{v.orderSn}</p>
                    </div>
                    <div className={styles.orderTopRight}>{v.statusName}</div>
                  </div>
                  {v.items.map((g) => {
                    return (
                      <div
                        key={g.id}
                        className={styles.allOrderMid}
                        onClick={(e) => this.handleGoodsClick(e, g.goods.id)}
                      >
                        <div className={styles.orderMidLeft}>
                          <img
                            src={
                              "http://linjiashop.microapp.store/prod-api/file/getImgStream?idFile=" +
                              g.goods.pic
                            }
                            alt=""
                          />
                        </div>
                        <div className={styles.orderMidRight}>
                          <div className={styles.MidRightTop}>{g.title}</div>
                          <div className={styles.MidRightMid}>{g.goods.descript}</div>
                          <div className={styles.MidRightBottom}>
                            <div className={styles.RightBottomLeft}>
                              ￥{(parseInt(g.price) / 100).toFixed(2)}
                            </div>
                            <div className={styles.RightBottomRight}>x{g.count}</div>
                          </div>
                        </div>
                      </div>
                    );
                  })}

                  <div className={styles.allOrderBottom}>
                    <span>合计：{(parseInt(v.totalPrice) / 100).toFixed(2)}</span>
                  </div>

                  {v.statusName === "待付款" ? (
                    <div className={styles.allOrderOprates}>
                      <div
                        className={styles.cancelOrder}
                        onClick={(e) => this.handleCancelClick(e, v.orderSn)}
                      >
                        取消订单
                      </div>
                      <div
                        className={styles.payNow}
                        onClick={(e) =>
                          this.handlePayClick(e, {
                            orderSn: v.orderSn,
                            totalPrice: v.totalPrice,
                          })
                        }
                      >
                        立即付款
                      </div>
                    </div>
                  ) : (
                    <div className={styles.allOrderOprates}>
                      <div className={styles.payNow}>已取消</div>
                    </div>
                  )}
                </div>
              );
            })}
            <div className={styles.bottomTips}>没有更多了</div>
          </div>
          <div className={this.state.active == 2 ? styles.orderListItem : styles.hidden}>
            {this.state.orderList.map((v, index) => {
              if (v.statusName == "待付款") {
                return (
                  <div
                    className={styles.allOrderItems}
                    key={v.id}
                    onClick={this.handleOderClick.bind(this, v.orderSn)}
                  >
                    <div className={styles.allOrderTop}>
                      <div className={styles.orderTopLeft}>
                        订单编号：
                        <p>{v.orderSn}</p>
                      </div>
                      <div className={styles.orderTopRight}>{v.statusName}</div>
                    </div>
                    {v.items.map((g) => {
                      return (
                        <div
                          key={g.id}
                          className={styles.allOrderMid}
                          onClick={(e) => this.handleGoodsClick(e, g.goods.id)}
                        >
                          <div className={styles.orderMidLeft}>
                            <img
                              src={
                                "http://linjiashop.microapp.store/prod-api/file/getImgStream?idFile=" +
                                g.goods.pic
                              }
                              alt=""
                            />
                          </div>
                          <div className={styles.orderMidRight}>
                            <div className={styles.MidRightTop}>{g.title}</div>
                            <div className={styles.MidRightMid}>{g.goods.descript}</div>
                            <div className={styles.MidRightBottom}>
                              <div className={styles.RightBottomLeft}>
                                ￥{(parseInt(g.price) / 100).toFixed(2)}
                              </div>
                              <div className={styles.RightBottomRight}>x{g.count}</div>
                            </div>
                          </div>
                        </div>
                      );
                    })}

                    <div className={styles.allOrderBottom}>
                      <span>合计：{(parseInt(v.totalPrice) / 100).toFixed(2)}</span>
                    </div>

                    <div className={styles.allOrderOprates}>
                      <div
                        className={styles.cancelOrder}
                        onClick={(e) => this.handleCancelClick(e, v.orderSn)}
                      >
                        取消订单
                      </div>
                      <div
                        className={styles.payNow}
                        onClick={(e) =>
                          this.handlePayClick(e, {
                            orderSn: v.orderSn,
                            totalPrice: v.totalPrice,
                          })
                        }
                      >
                        立即付款
                      </div>
                    </div>
                  </div>
                );
              }
            })}
            <div className={styles.bottomTips}>没有更多了</div>
          </div>
          <div className={this.state.active == 3 ? styles.orderListItem : styles.hidden}>
            <div className={styles.bottomTips}>没有更多了</div>
          </div>
          <div className={this.state.active == 4 ? styles.orderListItem : styles.hidden}>
            <div className={styles.bottomTips}>没有更多了</div>
          </div>
          <div className={this.state.active == 5 ? styles.orderListItem : styles.hidden}>
            <div className={styles.bottomTips}>没有更多了</div>
          </div>
        </div>
        {/* 订单列表结束 */}
      </div>
    );
  }
}

export default withRouter(Order);
